<script setup lang="ts">
const { login, form } = useAuth()
</script>

<template>
  <div class="flex h-screen w-full items-center justify-center bg-gray-900 bg-cover bg-no-repeat bgimg">
    <div class="rounded-xl bg-gray-800 bg-opacity-50 px-16 py-10 shadow-lg backdrop-blur-md max-sm:px-8">
      <div class="text-white">
        <div class="mb-8 flex flex-col items-center">
          <img src="@/assets/login-log.svg" width="150" alt="" srcset="" />
          <h1 class="mb-2 text-2xl">达人管理系统</h1>
          <span class="text-gray-300">登录</span>
        </div>
        <form @submit.prevent="login">
          <div class="mb-4 text-lg">
            <input v-model="form.account"
              class="rounded-3xl border-none bg-yellow-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
              type="text" name="name" placeholder="手机号" />
          </div>

          <div class="mb-4 text-lg">
            <input v-model="form.password"
              class="rounded-3xl border-none bg-yellow-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
              type="Password" name="name" placeholder="*********" />
          </div>
          <div class="mt-8 flex justify-center text-lg text-black">
            <button type="submit"
              class="rounded-3xl bg-yellow-400 bg-opacity-50 px-10 py-2 text-white shadow-xl backdrop-blur-md transition-colors duration-300 hover:bg-yellow-600">
              登录
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bgimg {
  background-image: url('@/assets/bg-login.avif')
}
</style>
